<template>
  <div class="message-manage-item">
    <div class="message-manage-item-left">
      <div style="margin: 20px"><h2>个人信息</h2></div>
      <form action="">
        <table class="message-manage-table">
          <tr style="margin-top: 10px">
            <td>用 户 名：</td>
            <td>
              <input
                type="text"
                placeholder="请输入用户名"
                class="message-manage-input"
              />
            </td>
          </tr>
          <tr>
            <td>邮 箱：</td>
            <td>
              <input
                type="password"
                placeholder="请输入邮箱"
                class="message-manage-input"
              />
            </td>
          </tr>
          <tr>
            <td>手 机 号：</td>
            <td>
              <input
                type="text"
                placeholder="请输入手机号"
                class="message-manage-input"
              />
            </td>
          </tr>
          <tr>
            <td>年 龄：</td>
            <td>
              <input
                type="password"
                placeholder="请输入年龄"
                class="message-manage-input"
              />
            </td>
          </tr>
          <tr>
            <td>性 别：</td>
            <td>
              <div class="mb-2 flex items-center text-sm">
                <el-radio-group v-model="radio1" class="ml-4">
                  <el-radio label="1" size="large">Option 1</el-radio>
                  <el-radio label="2" size="large">Option 2</el-radio>
                </el-radio-group>
              </div>
            </td>
          </tr>
          <tr>
            <td>地 址：</td>
            <td>
              <textarea
                placeholder="请输入地址"
                class="message-manage-textarea"
              />
            </td>
          </tr>
          <tr>
            <td></td>
            <td
              class="password-Change-item"
              style="padding-left: 40px; margin-top: 20px"
            >
              <button type="submit">提 交</button>
            </td>
          </tr>
        </table>
      </form>
    </div>
    <div class="message-manage-item-right">
      <div style="flex: 1; margin-top: 10px"><h2>用户名</h2></div>
      <div
        style="
          display: flex;
          flex: 6;
          /* background-color: red; */
          width: 100%;
          justify-content: center;
          height: 100%;
        "
      >
        <div style="display: flex; flex-direction: column; align-items: center">
          <div>
            <el-avatar
              style="height: 100px; width: 100px"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
          </div>
          <div style="margin-top: 20px">
            <h3>{{ consumer }}</h3>
          </div>
          <div class="password-Change-item" style="margin-top: 40px">
            <button>更换头像</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "messageManage",
  data() {
    return {
      consumer: "管理员",
    };
  },
};
</script>

<style scoped></style>
